<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <span>{{ msg }}</span>

      <!-- 插槽和属性的区别： -->
      <!-- 插槽可以传递HTML，而属性不行 -->
      <!-- 插槽一般用来指定HTML结构，属性一般用来传递数据 -->
      <navigation-link url="http://baidu.com">
        <!-- 死规定：以后只要是填充插槽内容，一上来就先写个template再说 -->
        <!-- template元素只是一个临时的包裹元素，最终并不会渲染到页面中 -->
        <template v-slot:default> 百度一下，你就知道 </template>
        <!-- 旧版语法 -->
        <!-- <template slot="default"> 百度一下，你就知道 </template> -->
      </navigation-link>
      <navigation-link url="http://jd.com">
        <template v-slot:default> 京东 </template>
      </navigation-link>
    </div>

    <script src="./js/vue.js"></script>
    <script>
      Vue.component('NavigationLink', {
        props: {
          url: String,
        },
        template: `
          <div>
            <a :href="url">
              <slot></slot> 
              <!-- 等价于：<slot name="default"></slot> -->
            </a>
          </div>
        `,
      });

      new Vue({
        el: '#app',
        data: {
          msg: 'hehe',
        },
      });
    </script>
  </body>
</html>
